<template>
    <div class="login-container">
        <el-form :model="form" :rules="rules" ref="fromRef" label-width="120px" class="login-form">
            <div class="title-container">
                <h5 class="title">用户登录</h5>
            </div> 
            <el-form-item label="User" prop="username">
                <el-icon :size="20"  class="svg-container">
                    <component :is="icon.Avatar"></component>
                </el-icon>
                <el-input v-model="form.username" />
            </el-form-item>
            <el-form-item label="Password"  prop="password">
                <el-icon :size="20" class="svg-container">
                    <component :is="icon.Lock"></component>
                </el-icon>
                <el-input type="password" v-model="form.password" />
            </el-form-item>
            <el-button type="primary" class="login-button" @click="handleLogin(fromRef)">登录</el-button>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { reactive,ref } from 'vue'
import type {  FormRules , FormInstance } from 'element-plus' 
// import { user } from '@/api/index'
import { useloginStore } from '@/store/usePinia2' 
    const rules = reactive<FormRules>({
        username:[
            { required: true, message: '请输入用户名', trigger: 'blur' },
            // { min: 5, max: 10, message: '用户名长度 5 ~ 10', trigger: 'blur' },
        ],
        password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
        ]
    }) 
    // 定义icon
    const icon = reactive({
        Avatar: 'Avatar',
        Lock: 'Lock',
    })

    // 表单
    const form = reactive({
        username: 'admin',
        password: '111111',
    })
    
    // 提交表单
    const fromRef = ref<FormInstance>()
    // 表单校验
    const handleLogin = (fromRef: FormInstance | undefined) => { 
        if (!fromRef) return
        fromRef.validate((valid) => {
            if (valid) { 
                // 参数
                let {username,password} = form
                // 派发请求
                const Login = useloginStore() 
                Login.Login(username,password)  
            } else {
                console.log('error submit!')
                return false
            }
        })
    }
</script>




<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #000;
$cursor: #000; 
.login-container {
    min-height: 100%;
    width: 100%;
    background-color: $bg;
    overflow: hidden; 
    .login-form {
        position: relative;
        width: 520px;
        max-width: 100%;
        padding: 35px 35px ;
        margin: 0 auto;
        overflow: hidden; 
        margin-top: 200px;
        background-color: #fff;
        border-radius: 5px;
        :deep( .el-form-item) {
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        color: #454545; 
        label{
            line-height: 50px;
        }
        } 
        :deep(.el-input) { 
        height: 100%;
        width: 100%; 
        position: relative; 
        input {
            background: transparent;
            border: 0px;
            -webkit-appearance: none;
            border-radius: 0px;
            padding: 6px 5px 6px 30px;
            color: $light_gray;
            height: 47px;
            caret-color: $cursor; 
            font-size: 18px;
            } 
        }
        .login-button {
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        }
    }  
    .title-container {
        // position: relative; 
        .title {
        font-size: 26px;
        color: #000;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
        }  
    } 
    .svg-container {
        padding: 6px 5px 6px 15px;
        color: $dark_gray;
        vertical-align: middle;
        display: inline-block;
        position:absolute;
        z-index: 101;
    } 
    }

</style>